<template>
    <div class='container'>

        <div class="container">
            <el-tabs v-model="activeName1" @tab-click="handleClick1">
                <el-tab-pane :label="item.templateName" :name="item.id" v-for="(item,index) in list1" :key="index">

                </el-tab-pane>
                <!-- <tablelist :activeName1 = "activeName1"></tablelist> -->
            </el-tabs>
        </div>

        <el-form>
            <el-row :gutter="16">
                <el-col :span="12">
                    <div class="container">
                        <h3 style="margin-bottom: 20px">打印设置(模板)</h3>
                        <div>
                            <el-form-item v-for="(item,index) in content" :key="index" v-dragging="{ list: content, item: item, group: 'content' }">
                                <el-input v-model.trim="item.name" style="width: 170px"></el-input>
                                <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj' && type != 'c60pt' && type != 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type == 'c60pt' || type == 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>1g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>3.3g</span>
                                <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>
                                <el-button v-show="item.type == ''" @click="deleteitem($event,index)" style="margin-left:30px;">删除</el-button>
                            </el-form-item>
                        <el-form-item label-width="100px">
                            <el-button @click="additem">添加一条</el-button>
                        </el-form-item>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="container">
                        <h3 style="margin-bottom: 20px">打印预览({{name}})</h3>
                        <div class="container codeView codeViewC50" >
                            <div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>
                            <!-- <el-radio v-model="radioValue" label="1"></el-radio> -->
                            <h5>生地黄</h5>
                            <div>
                                <el-form :label-position="labelPosition" label-width="180px">
                                    <el-row>
                                        <el-form-item v-for="(item,index) in content" :key="index" :label="item.name " >
                                            <!-- &nbsp;&nbsp; -->
                                            <span v-if="item.type != '规格'?true:false">{{item.details}}</span>
                                            <span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克{{item.details}}2100克</span>
                                            <span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj'">{{item.detailone}}100g{{item.details}}2100g</span>
                                        </el-form-item>
                                    </el-row>
                                </el-form>
                            </div>
                            <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed">
		    <el-button type="primary" @click="submitRules('ruleForm')" >提交</el-button>
		</el-form-item>
        </el-form>


    </div>
</template>

<script>

import {template_findByCompanyId,template_save} from "@/request/manageapi"
import draggable from 'vuedraggable'
// import tablelist from "./tablelist.vue"
export default{
    components: { draggable },
    // components:{
    //     tablelist
    // },
    data() {
        return{
            labelPosition:'left',
            list:[],
            activeName:'',
            activeName1:'',
            list1:[],
            content:[
                {name:'产品批号',details:'1710007',type:'批号',},
                {name:'装量',details:'相当于饮片',type:'规格'},
                {name:'生产日期',details:'2020.08.07',type:'生产日期'},
                {name:'有效期至',details:"2020.09",type:'有效期至'}
			],
            name:'',
            arr:[],
            type:""
        }
    },
    mounted(){
        this.init1()
    },
    methods:{
        handleClick1(e){
            // console.log(e)
            this.name = e.label
            this.arr = this.list1[e.index]
            this.type = this.list1[e.index].type
            // console.log(this.list1[e.index])
            this.content = JSON.parse(this.list1[e.index].content)
            for (var i = 0; i < this.content.length; i++) {
                if(this.content[i].type == "批号"){
                    this.content[i].details = "19040021"
                }
                if(this.content[i].type == "生产日期"){
                    this.content[i].details = "2019.03.19"
                }
                if(this.content[i].type == "有效期至"){
                    this.content[i].details = "35个月"
                }
                if(this.content[i].type == "包装规格"){
                    this.content[i].details = "每袋装100克"
                }
            }

        },
        handleClick(e){
            this.init1()
        },

        init1(){
            let companyId = localStorage.getItem("companyId") +"&isNew=1"
            template_findByCompanyId(`?companyId=${companyId}`).then((res)=>{
                this.list1 = res.data
                this.activeName1 = res.data[0].id
                this.type = res.data[0].type
                this.name = res.data[0].templateName
                this.arr = res.data[0]
                this.content = JSON.parse(res.data[0].content)

                for (var i = 0; i < this.content.length; i++) {
                    if(this.content[i].type == "批号"){
                        this.content[i].details = "19040021"
                    }
                    if(this.content[i].type == "生产日期"){
                        this.content[i].details = "2019.03.19"
                    }
                    if(this.content[i].type == "有效期至"){
                        this.content[i].details = "35个月"
                    }
                    if(this.content[i].type == "包装规格"){
                        this.content[i].details = "每袋装100克"
                    }
                }

            })
        },
        submitRules(){

           this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // template_save(data).then((res)=>{
                //     this.$notify({
                //         title:'提示',
                //         message:'修改成功',
                //         type:"success"
                //     })
                //     this.init1()
                // })
                 this.arr.content = JSON.stringify(this.content)
                //  console.log(this.arr)
                template_save(this.arr).then((res)=>{
                    this.$notify({
                        title:'提示',
                        message:'修改成功',
                        type:"success"
                    })
                    // this.handleClick
                })
            })

        },
        additem(){
            this.content.push({name:'限制四字',details:'自定义输入内容',type:''})
        },
        deleteitem(event,index){
            this.content.splice(index,1)
        },
    }
}
</script>


<style scoped lang="less">
.container{
    min-height:65%;
}
.el-pagination{
    text-align: center;
}
.el-radio__input.is-checked+.el-radio__label{
    display: none;
}
.codeView{
    position: relative;
    padding-left: 30px;
    .el-radio{
        position: absolute;
        left: 0;
        top: 30%;
        .el-radio__label{
            display: none;
        }
    }
    h5{ font-size: 18px; color: #303133; margin-bottom: 10px;}
    .el-form-item{ margin-bottom: 0;}
    .img{ position: absolute; right: 0px; bottom: 10px;}
}
.codeViewC50{
    padding: 10px 20px;
    .el-radio{
        position: absolute;
        left: -22px;
        top: 50%;
        .el-radio__label{
            display: none;
        }
    }
    p{
        // width: 218px;
        text-align: center;
        display: inline-block;
    }
    h5{
        display: block;
        width: 245px;
        text-align: center;
    }
}
</style>
